import React, { Component, Fragment } from 'react';
import { Operator, TableMethods } from '@/common/Hoc/data';
import { Button, Card, Divider, Dropdown, Form, Icon, Menu, Popconfirm } from 'antd';
import StandardTable from './StandardTable';
import { ListCurd } from '@/common/Hoc/ListCurdHoc';
import { deleteById, selectMenuList, deleteByIds } from '@/services/permission';
import styles from '@/common/styles/table.less';
import classnames from 'classnames';
import { BatchOperator } from '@/common/Hoc/BatchHoc';
import FormDrawer from './drawer/FormDrawer';
import PubSub from 'pubsub-js';

const batchOperators: Operator[] = [
  {
    code: 'remove',
    name: '删除',
    method: deleteByIds,
  },
];

const baseMethods: TableMethods = {
  getList: (param: any) => selectMenuList(param),
  getDelete: (param: any) => deleteById(param),
};

@ListCurd(baseMethods)
@BatchOperator(batchOperators)
// @ts-ignore
@Form.create()
export default class CurdTable extends Component<any, any> {
  componentDidMount(): void {
    PubSub.subscribe('toggleDrawer', this.eventToggleDrawer);
  }

  componentWillUnmount(): void {
    PubSub.unsubscribe('toggleDrawer');
  }

  state: any = {
    drawerShow: false,
    roleId: null,
  };

  toggleDrawer = (isShow: boolean, roleId?: number) => {
    this.setState(
      {
        roleId: roleId,
      },
      () => {
        this.setState({
          drawerShow: isShow,
        });
      },
    );
  };

  eventToggleDrawer = (msg: string, isShow: boolean) => {
    this.toggleDrawer(isShow);
  };

  columns: any[] = [
    {
      title: '目录名称',
      dataIndex: 'menuName',
    },
    {
      title: '路由地址',
      dataIndex: 'routerUrl',
    },
    {
      title: '图标',
      dataIndex: 'menuIcon',
      render: (text: any, record: any) => {
        if (record.menuIcon) {
          return record.menuIcon;
        } else {
          return '-';
        }
      },
    },
    {
      title: '组件',
      dataIndex: 'componentName',
    },
    {
      title: '排序',
      dataIndex: 'priority',
    },
    {
      title: '权限编号',
      dataIndex: 'permsCode',
      render: (text: any, record: any) => {
        if (record.permsCode) {
          return record.permsCode;
        } else {
          return '-';
        }
      },
    },
    {
      title: '类型',
      dataIndex: 'type',
      render: (text: any, record: any) => {
        if (record.type === 0) {
          return '一级菜单';
        }
        if (record.type === 1) {
          return '菜单';
        }
        if (record.type === 2) {
          return '按钮/权限';
        }
        return '';
      },
    },
    {
      title: '操作',
      render: (text: any, record: any) => (
        <Fragment>
          <a
            onClick={() => {
              this.props.handleModalVisible(true, record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm
            placement="bottom"
            title="确定删除吗?"
            onConfirm={() => {
              this.props.handleDelete(record.id);
            }}
            okText="确定"
            cancelText="取消"
          >
            <a href="">删除</a>
          </Popconfirm>
        </Fragment>
      ),
    },
  ];

  menu = (
    <Menu onClick={this.props.handleMenuClick} selectedKeys={[]}>
      <Menu.Item key="remove">删除</Menu.Item>
    </Menu>
  );

  render() {
    const {
      tableData,
      tableLoading,
      modalVisible,
      currentData,
      handleModalVisible,
      selectionsChange,
    } = this.props;

    return (
      <div className="s_r_table_wrapper">
        <Card bordered={false}>
          <div className={classnames(styles.tableList)}>
            <div className={styles.tableListForm}></div>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => handleModalVisible(true)}>
                新建
              </Button>

              <span>
                <Button>批量操作</Button>
                <Dropdown overlay={this.menu}>
                  <Button>
                    更多操作 <Icon type="down" />
                  </Button>
                </Dropdown>
              </span>

              <Button icon="redo" type="primary" onClick={() => this.props.refresh()}>
                刷新
              </Button>
            </div>
            <StandardTable
              tableData={tableData}
              columns={this.columns}
              selectionsChange={selectionsChange}
              loading={tableLoading}
            />
          </div>
        </Card>
        <FormDrawer
          menuList={tableData}
          modalVisible={modalVisible}
          currentData={currentData}
          handleModalVisible={handleModalVisible}
        />
      </div>
    );
  }
}
